package com.fanketly.funacg2.ui.screen

import android.util.Log
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.fanketly.funacg2.data.model.TagListItem
import com.fanketly.funacg2.ui.components.OutlinedText
import com.fanketly.funacg2.ui.navigation.toShowThisTagScreen
import com.fanketly.funacg2.ui.theme.FunACG2Theme
import com.fanketly.funacg2.ui.theme.dp4
import com.fanketly.funacg2.ui.theme.dp6
import com.fanketly.funacg2.ui.viewmodels.HomeViewModel
import com.fanketly.funacg2.ui.viewmodels.TagViewModel
import com.ramcosta.composedestinations.annotation.Destination
import com.ramcosta.composedestinations.navigation.DestinationsNavigator

@Destination
@Composable
fun TagsScreen(
    tagViewModel: TagViewModel = hiltViewModel(),
    homeViewModel: HomeViewModel,
    navigator: DestinationsNavigator,
) {
    Log.i("TAG", "TagsScreen: ")
    TagsContent(tagViewModel.tagList) {
        navigator.toShowThisTagScreen(it,homeViewModel)
    }
}

// TODO: 跳转过来的透明背景可以优化
@OptIn(ExperimentalLayoutApi::class)
@Composable
fun TagsContent(tags: List<TagListItem>, onClick: (tag: Int) -> Unit) {
    Surface(modifier = Modifier.fillMaxSize()) {
        Column(
            Modifier
                .padding(4.dp)
                .verticalScroll(rememberScrollState())
        ) {
            if (tags.isNotEmpty()) FlowRow(Modifier.fillMaxWidth()) {
                tags.forEach {
                    OutlinedText(
                        text = it.name,
                        padding = dp6,
                        modifier = Modifier
                            .padding(dp4)
                            .clickable(onClick = { onClick(it.id) }),
                        style = MaterialTheme.typography.bodySmall
                    )
                }
            } else {
                CircularProgressIndicator(
                    modifier = Modifier
                        .fillMaxWidth()
                        .wrapContentWidth(Alignment.CenterHorizontally)
                )
            }
        }
    }

}

@Preview
@Composable
private fun TagsPreview() {
    FunACG2Theme() {
        TagsContent(
            listOf(
                TagListItem(name = "111111111"),
                TagListItem(name = "111111111"),
                TagListItem(name = "111111111"),
                TagListItem(name = "111111111"),
                TagListItem(name = "22"),
                TagListItem(name = "1")
            )
        ) {}
    }
}